<template>
  <div>
    <div class="mb-10">
      <label>地区：<input v-model="location"></label>
      <label> 关键词：<input v-model="keyword"></label>
      <label> 经度：<input v-model="markerPo.lat"></label>
      <label> 纬度：<input v-model="markerPo.lng"></label>
    </div>

    <baidu-map
      ak="22222222222222222222222222"
      :scroll-wheel-zoom="true"
      @rightclick="clickBmap"
    >
      <!--地图视图-->
      <bm-view class="map" />

      <!--显示更多-->
      <div class="more_panel">
        <span :class="{ down: isShowPanel }" @click.stop="showPanel">
          <span>{{ isShowPanel ? "隐藏" : "显示" }}</span>搜索列表<em class="el-icon-d-arrow-right" />
        </span>
      </div>

      <!--搜索-->
      <bm-local-search
        :keyword="keyword"
        :panel="isShowPanel"
        :auto-viewport="true"
        :location="location"
        @searchcomplete="searchcomplete"
      />

      <!--点标注-->
      <bm-marker
        :position="markerPo"
        :dragging="true"
        :title="storeName"
        :z-index="999999999"
        :icon="{ url: markerIcon, size: { width: 34, height: 34 } }"
        @click="infoWindowOpen"
        @dragend="dragend"
      >
        <bm-info-window show="isShowInfo" @close="infoWindowClose" @open="infoWindowOpen">{{ address }}</bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// 地图视图
import BmView from 'vue-baidu-map/components/map/MapView'
// 搜索
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
// 点标注
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
// 标注弹窗
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  components: {
    BaiduMap,
    BmView,
    BmLocalSearch,
    BmMarker,
    BmInfoWindow
  },

  data() {
    return {
      storeName: '',
      center: {
        // 经纬度
        lng: 39.9,
        lat: 116.3
      },
      // 地图展示级别
      zoom: 3,
      location: '北京',
      keyword: '北京',
      markerPo: {
        lng: 39.9,
        lat: 116.3
      },
      isShowPanel: true,
      isShowInfo: false,
      // 标注图片
      markerIcon: '',
      address: ''
    }
  },
  methods: {
    clickBmap(val) {
      // 右击鼠标放标注
      this.markerPo = val.point
    },
    showPanel() {
      // 点击标注出现弹框
      this.isShowPanel = !this.isShowPanel
    },
    infoWindowClose() {
      // 弹框关闭
      this.isShowInfo = false
    },
    infoWindowOpen() {
      // 弹框打开
      this.isShowInfo = true
    },
    dragend(val) {
      // 标注拖拽完成获取坐标信息
      this.markerPo = val.point
      // 创建地址解析器的实例
      const geocoder = new BaiduMap.Geocoder()
      geocoder.getLocation(val.point, (rs) => {
        this.address = rs.address
      })
    },
    searchcomplete(arr) {
      this.isShowPanel = true
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 500px;
}

.more_panel {
  text-align: center;
  font-size: 12px;
  color: #2878ff;
  padding-top: 10px;
  span {
    cursor: pointer;
    i {
      transform: rotate(90deg);
    }
  }
  span.down {
    i {
      transform: rotate(-90deg);
    }
  }
}
</style>
